import ScrollTable from "@/components/Table/ScrollTable";
import React from "react";
import type { ColumnsType } from 'antd/es/table';
import '../index.double.css';
type ModelProps = {
  stepProductDetail: API.StepProductDetailDTO[] | undefined,
}
const StepProductDetail: React.FC<ModelProps> = ({stepProductDetail}) => {
  const columns: ColumnsType<API.StepProductDetailDTO>  = [
    {
      title: '关键工序',
      key: 'keyProcessName',
      dataIndex: 'keyProcessName',
      width: 200,
      align: "center",
    },
    {
      title: '月规划产能',
      key: 'monthlyPlanningCapacity',
      dataIndex: 'monthlyPlanningCapacity',
      align: "center",
    },
    {
      title: '日计划产能',
      key: 'dailyPlanningCapacity',
      dataIndex: 'dailyPlanningCapacity',
      align: "center",
    },
    {
      title: '排产计划',
      key: 'actualReleasedPlan',
      dataIndex: 'actualReleasedPlan',
      align: "center",
    },
    {
      title: '排产饱和度',
      key: 'planSaturation',
      dataIndex: 'planSaturation',
      align: "center",
      render: (dom) => (
        <span>{Number((dom * 100).toFixed(2)) + "%"}</span>
      ),
    },
    {
      title: '计划下交',
      key: 'planningDelivery',
      dataIndex: 'planningDelivery',
      align: "center",
    },
    {
      title: '实际下交',
      key: 'actualDelivery',
      dataIndex: 'actualDelivery',
      align: "center",
    },
    {
      title: '入库达成率',
      key: 'planAchievingRate',
      dataIndex: 'planAchievingRate',
      align: "center",
      render: (dom) => (
        <span>{Number((dom * 100).toFixed(2)) + "%"}</span>
      ),
    },
    {
      title: 'WIP数量',
      key: 'wipquantity',
      dataIndex: 'wipquantity',
      align: "center",
    },
  ];
  return (
    <>
      <ScrollTable title={""} style={{padding: '5px 0'}} rowKey={'keyProcessCode'} columns={columns} dataSource={stepProductDetail}/>
    </>
  );
}
export default StepProductDetail;
